@extends('layouts.app')
@section('title','商品列表')

@section('content')
    <div class="row">
        <div class="card">
            <div class="card-body">
                <!-- 筛选和排序开始 -->
                <form action="{{ route('products.index') }}" class="search-form mb-4">
                    <div>
                        <div class="row my-bread">
                            <!-- 面包屑开始 -->
                            <div class="col-auto category-breadcrumb">
                                <!-- 添加一个名为 全部 的链接，直接跳转到商品列表页 -->
                                <a class="all-products" href="{{ route('products.index') }}">全部</a> >
                                <!-- 如果当前是通过分类筛选的 -->
                                @if ($category)
                                    <!-- 遍历这个分类的所有祖先分类，我们在模型的访问器中已经排好序，因此可以直接使用 -->
                                    @foreach($category->ancestors as $ancestor)
                                        <!-- 添加一个名为该祖先分类名的链接 -->
                                        <span class="category">
              <a href="{{ route('products.index', ['category_id' => $ancestor->id]) }}">{{ $ancestor->name }}</a>
             </span>
                                        <span>&gt;</span>
                                    @endforeach
                                    <!-- 最后展示出当前分类名称 -->
                                    <span class="category">{{ $category->name }}</span><span> ></span>
                                    <!-- 当前类目的 ID，当用户调整排序方式时，可以保证 category_id 参数不丢失 -->
                                    <input type="hidden" name="category_id" value="{{ $category->id }}">
                                @endif
                            </div>
                            <!-- 面包屑结束 -->
                        </div>
                        <div class="mb-3 ml-1">
                            <!-- 展示子分类开始 -->
                            <!-- 如果当前是通过分类筛选，并且此类目是一个父分类 -->
                            @if ($category && $category->is_directory)
                                <div class="d-flex justify-content-start text-xs border-bottom pb-2">
                                    <div class="text-secondary">子分类：</div>
                                    <div>
                                        <!-- 遍历直接子分类 -->
                                        @foreach($category->children as $child)
                                            <a class="text-success" href="{{ route('products.index', ['category_id' => $child->id]) }}">{{ $child->name }}</a>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                            <!-- 展示子类目结束 -->
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-9">
                            <div class="form-row">
                                <div class="col-auto"><input type="text" class="form-control form-control-sm" name="search" placeholder="搜索"></div>
                                <div class="col-auto"><button class="btn btn-primary btn-sm">搜索</button></div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <select name="order" class="form-control form-control-sm float-right">
                                <option value="">排序方式</option>
                                <option value="price_asc">价格从低到高</option>
                                <option value="price_desc">价格从高到低</option>
                                <option value="sold_count_desc">销量从高到低</option>
                                <option value="sold_count_asc">销量从低到高</option>
                                <option value="rating_desc">评价从高到低</option>
                                <option value="rating_asc">评价从低到高</option>
                            </select>
                        </div>
                    </div>
                </form>
                <!-- 筛选和排序结束 -->

                <!-- 分面搜索结果开始 -->
                <!-- 遍历聚合的商品属性 -->
                <div class="pb-2">
                    @foreach($properties as $property)
                        <div class="row border-bottom p-1">
                            <!-- 输出属性名 -->
                            <div class="col-3 text-secondary">{{ $property['key'] }}：</div>
                            <div class="col-9">
                                <!-- 遍历属性值列表 -->
                                @foreach($property['values'] as $value)
                                    <!-- 调用下面定义的 appendFilterToQuery 函数 -->
                                    <a href="javascript: appendFilterToQuery('{{ $property['key'] }}', '{{ $value }}')">{{ $value }}</a>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
                <!-- 分面搜索结果结束 -->
                <div class="row">
                    @foreach($products as $product)
                        <div class="col-md-3 mb-2">
                            <div class="card">
                                <a href="{{ route('products.show', ['product' => $product->id]) }}">
                                    <img src="{{$product->image_url}}" class="card-img-top img-thumbnail" alt="{{$product->title}}">
                                </a>
                                <div class="card-body">
                                    <h5 class="card-title text-danger border-bottom">
                                        ￥
                                        <span class="h2">{{$product->price}}</span>
                                    </h5>
                                    <p class="card-text border-bottom pb-2">
                                        <a href="{{ route('products.show', ['product' => $product->id]) }}" class="text-success">
                                            {{$product->title}}
                                        </a>
                                    </p>
                                    <div class="row">
                                        <span class="text-secondary text-xs col-6 border-right text-center">销量:{{$product->sold_count}}笔</span>
                                        <span class="text-secondary text-xs col-6 text-center">评价:{{$product->review_count}}次</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="float-right">{{ $products->appends($filters)->render() }}</div>
            </div>
        </div>
    </div>
    </div>
@stop
@section('scriptsAfterJs')
    <script>
        let filters = {!! json_encode($filters) !!};
        $(document).ready(function () {
            $('.search-form input[name=search]').val(filters.search);
            $('.search-form select[name=order]').val(filters.order);
        })

        $('.search-form select[name=order]').on('change', function() {
            $('.search-form').submit();
        });

        // 定义一个函数，用于解析当前 Url 里的参数，并以 Key-Value 对象形式返回
        function parseSearch() {
            // 初始化一个空对象
            let searches = {};
            // location.search 会返回 Url 中 ? 以及后面的查询参数
            // substr(1) 将 ? 去除，然后以符号 & 分割成数组，然后遍历这个数组
            location.search.substr(1).split('&').forEach(function (str) {
                // 将字符串以符号 = 分割成数组
                let result = str.split('=');
                // 将数组的第一个值解码之后作为 Key，第二个值解码后作为 Value 放到之前初始化的对象中
                // uri="https://www.runoob.com/my test.php?name=ståle&car=saab";
                //encodeURIComponent()
                //https%3A%2F%2Fwww.runoob.com%2Fmy%20test.php%3Fname%3Dst%C3%A5le%26car%3Dsaab
                //https://www.runoob.com/my test.php?name=ståle&car=saab
                searches[decodeURIComponent(result[0])] = decodeURIComponent(result[1]);
            });
            return searches;
        }

        // 根据 Key-Value 对象构建查询参数
        function buildSearch(searches) {
            // 初始化字符串
            let query = '?';
            // 遍历 searches 对象
            _.forEach(searches, function (value, key) {
                query += encodeURIComponent(key) + '=' + encodeURIComponent(value) + '&';
            });
            // 去除最末尾的 & 符号
            return query.substr(0, query.length - 1);
        }

        // 将新的 filter 追加到当前的 Url 中
        function appendFilterToQuery(name, value) {
            // 解析当前 Url 的查询参数
            let searches = parseSearch();
            // 如果已经有了 filters 查询
            if (searches['filters']) {
                // 则在已有的 filters 后追加
                searches['filters'] += '|' + name + ':' + value;
            } else {
                // 否则初始化 filters
                searches['filters'] = name + ':' + value;
            }
            // 重新构建查询参数，并触发浏览器跳转
            location.search = buildSearch(searches);
        }

    </script>
@endsection
